﻿ <html>
	<head>
	<style type="text/css">
        .message {
            font-size:16px;
            margin-bottom: 7px;
            color: black;
        }
        .stats {
        	font-size:12px;
            font-weight: normal;
        }
        .likeButton {
        	font-size:12px;
        	float: right;
        }
        .likedButton {
        	font-size:12px;
        	float: right;
        }
		
		.myClassesItem {
			color: black;
		}
		.allClassesItem {
			color: black;
		}
		
		.liButton {
			text-align: center;
			color: black;
		}
		.liButtonInactive {
			text-align: center;
		}

        .post {
        	font-size:12px;
        }
        .view {
        	font-size:12px;
        }

        .hidden {
        	visibility:hidden;
        }
        	
        	
    </style>

		<title>Instant Input</title>
		<style type="text/css" media="screen">@import "scripts/jqt/jqtouch.css";</style>
		<style type="text/css" media="screen">@import "scripts/jqt/theme.css";</style>
		<style type="text/css" media="screen">@import "scripts/slider.css";</style>
		<script src="scripts/jquery.js" type="application/x-javascript" charset="utf-8"></script>
		<script src="scripts/jquery.form.js" type="application/x-javascript" charset="utf-8"></script>
		<script src="scripts/jquery.timers.js" type="application/x-javascript" charset="utf-8"></script>
		<script src="scripts/jqt/jqtouchProfessorApp.js" type="application/x-javascript" charset="utf-8"></script>
		<script src="scripts/instantinput.js" type="application/x-javascript" charset="utf-8"></script>
		<script src="scripts/slider.js" type="application/x-javascript" charset="utf-8"></script>
		<script src="scripts/polling.js" type="application/x-javascript" charset="utf-8"></script>
		<script src="scripts/messages.js" type="application/x-javascript" charset="utf-8"></script>
		<script src="scripts/professorApp.js" type="application/x-javascript" charset="utf-8"></script>
		
	</head>
	
	<body>
		
		<!-- Class List -->
		<div id="home" class="current">
			<div class="toolbar">
				<h1>My Classes</h1>
				<!--<a class="button leftButton">Edit</a>-->
				<a href="" class="add slideup" id="homeScreenAddButton">+</a>
			</div>
			<ul id="myClassesList"></ul>
		</div>
		
		<!-- In Class Metrics Page -->
		<div id="metricsView">
			<div class="toolbar">
				<h1></h1>
				<a class="back">My Classes</a>
				<a class="button" id="toMessages">Messages</a>
			</div>
			<ul>
				<li>
					<div class="metricTitle">Clarity</div>
					<div class="metricSubTitle">The content is...</div>
					<div class="sliderBar" id="clarity">
						<div class="sliderControlForClass"></div>
						<div class="sliderControl" ontouchstart="sliderTouchStarted(event);" ontouchmove="sliderTouchMoved(event);" ontouchend="sliderTouchEnded(event);" ontouchcancel="sliderTouchEnded(event);"></div>
					</div>
					<div class="sliderLabels">
						<div class="leftLabel">Unclear</div>
						<div class="middleLabel">So-So</div>
						<div class="rightLabel">Clear</div>
					</div>
				</li>
				<li>
					<div class="metricTitle">Pacing</div>
					<div class="metricSubTitle">The presenter is going...</div>
					<div class="sliderBar" id="pacing">
						<div class="sliderControlForClass"></div>
						<div class="sliderControl" ontouchstart="sliderTouchStarted(event);" ontouchmove="sliderTouchMoved(event);" ontouchend="sliderTouchEnded(event);" ontouchcancel="sliderTouchEnded(event);"></div>
					</div>
					<div class="sliderLabels">
						<div class="leftLabel">Too Slow</div>
						<div class="middleLabel">Just Right</div>
						<div class="rightLabel">Too Fast</div>
					</div>
				</li>
			</ul>
		</div>
		
		<!-- In Class Messages Page -->
		<div id="threadListView">
			<div class="toolbar">
				<h1></h1>
				<a class="back">My Classes</a>
				<a class="button" id="toMetrics">Metrics</a>
			</div>
			<ul>
				<li class="liButton" id="postNewThreadButton">Post New Thread</li>
			</ul>
			<ul id="threadList"></ul>
		</div>

		<div id="messageListView">
			<div class="toolbar">
				<h1>Thread Detail</h1>
				<a class="back"></a>
			</div>
			<ul>
				<li class="liButton" id="postReplyButton">Post Response</li>
			</ul>
			<ul id="messageList"></ul>
		</div>
		
		
		<!-- Post New Response -->
		<div id="postReply">
			<div class="toolbar">
				<h1>Post Response</h1>
				<a class="cancel">Cancel</a>
			</div>
			<ul>
				<li id="response_msg">Post Response:<textarea id ="response_text" rows="4"></textarea></li>
			</ul>
			<ul>
				<li class="liButton" id="submitReplyButton">Submit</li>
			</ul>
		</div>
		
		<!-- Post New Thread -->
		<div id="postNewThread">
			<div class="toolbar">
				<h1>Post New Thread</h1>
				<a class="cancel">Cancel</a>
			</div>
			<ul>
				<li>Post New:<textarea id ="newThreadText" rows="4"></textarea></li>
			</ul>
			<ul>
				<li class="liButton" id="submitNewThreadButton">Submit</li>
			</ul>
		</div>
		
		<!-- Add Existing Class -->
		<div id="addExisting">
			<div class="toolbar">
				<h1>Join a Class</h1>
				<a class="cancel">Cancel</a>
			</div>
			<ul>
			<li>Search:<form><input type="text" id="searchfield" /></form></li>
			</ul>
			<ul id="allClassesList"></ul>
		</div>
		
		<!-- Add Existing Class: Detail View (placeholder) -->
		<div id="addExistingDetailView"></div>

		<!-- Create New Class -->
		<div id="createNew">
			<div class="toolbar">
				<h1>New Class</h1>
				<a class="cancel">Cancel</a>
			</div>
			
			<form id="createForm">
			<ul>
				<li>Course: <input type="text" name="course" /></li>
				<li>Title: <input type="text" name="title" /></li>
				<li>Location: <input type="text" name="location" /></li>
				<li>Start Time: <input type="text" name="startTime" /></li>
				<li>End Time: <input type="text" name="endTime" /></li>
				<li>Days:
					<br />M <input type="checkbox" name="days" value="M" />
					<br />T <input type="checkbox" name="days" value="T" />
					<br />W <input type="checkbox" name="days" value="W" />
					<br />R <input type="checkbox" name="days" value="R" />
					<br />F <input type="checkbox" name="days" value="F" />
					<br />Sa <input type="checkbox" name="days" value="Sa" />
					<br />Su <input type="checkbox" name="days" value="Su" />
				</li>
				<li>Feedback Areas:
					<br />Pacing <input type="checkbox" name="feedback" value="pacing" />
					<br />Clarity <input type="checkbox" name="feedback" value="clarity" />
					<br />Messages <input type="checkbox" name="feedback" value="messages" />
				</li>
			</ul>
			<ul>
				<li class="liButton" id="createFormSubmit">Submit</li>
			</ul>
			</form>
		</div>
		
		<!-- Creat New Class Confirmation Screen (placeholder) -->
		<div id="createNewConfirmation"></div>
		
	</body>
</html>